<template>
  <div class="wrapper">
		<section class="content">
			<header>
				<div class="cellContainer">
					<h2>{{homeWork.name}}</h2>
					<span class="grade_name">{{grade.name}}</span>
				</div>
				<div style="margin-top: 10px;" class="cellContainer">
					<span class="create_date">
						创建时间: <strong>{{homeWork.createDate}} {{homeWork.createTime}}</strong>
					</span>
					<div class="commit">
						未提交: <strong>0</strong>
						已提交: <strong>0</strong>
						待批阅: <strong>0</strong>
					</div>
				</div>
			</header>
			<div class="tableContainer">
				<n-data-table
					:columns="columns"
					:data="students"
					:bordered="false"
				/>
			</div>
		</section>
		<WyDialog
			v-model:show="result.show"
			:title="result.title">
			<WorkResult v-if="result.show" :entry="result.params" />
		</WyDialog>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { get } from '@/axios'
import { useParamsStore } from '@/stores'
import { NButton, NUpload, useMessage, useDialog } from "naive-ui"
import { post } from '@/axios'
import WorkResult from '@/components/student/work/result'
import WyDialog from '@/components/dialog'
const message = useMessage()
const dialog = useDialog()
const paramsStore = useParamsStore()
const homeWork = ref({})
const grade = ref({})
const students = ref([])
const homeWorkCommits = ref([])
const result = reactive({
	show: false,
	title: 'AI作业批阅助手作业分析报告',
	params: null
})
function handleFinish ({file,event}, row) {
	if (file.type !== 'video/mp4' && file.type !== 'audio/mp3') {
		message.error('上传格式必须是mp3或mp4')
		return
	}
	if (file.file.size > 1024 * 1024 * 20) {
		message.error('文件大小不能超过20M')
		return
	}
	if (file.name.indexOf(`${row.no}_${row.name}`) !== 0) {
		message.error('文件名必须是学号_姓名')
		return
	}
	const url = URL.createObjectURL(file.file);
	const audioElement = new Audio(url);
	let duration = 0;
	audioElement.addEventListener("loadedmetadata", function(_event) {
		duration = Math.floor(audioElement.duration)
		post('/homeWorkCommit/upload', { 
			file: file.file, 
			total: duration, 
			studentId: row.id, 
			homeWorkId: homeWork.value.id,
			gradeId: grade.value.id
		}, content => {
			getInfo()
		})
	})
}
const columns = [
		{
			title: '学号',
			key: 'no',
			width: 100
		},
		{
			title: '姓名',
			key: 'name',
			width: 100
		},
		{
			title: '提交状态',
			width: 150,
			render: (row) => {
				return h('span', {
					style: {
						color: row.commitStatus === '已提交' ? '#67c23a' : '#f56c6c'
					}
				}, row.commitStatus)
			}
		},
		{
			title: '批阅状态',
			width: 180,
			render: (row) => {
				return h('span', {
					style: {
						color: row.readStatus === '已批阅' ? '#67c23a' : '#f56c6c'
					}
				}, row.readStatus)
			}
		},
		{
			title: '操作',
			width: 200,
			render: (row) => {
				if (!row.path) {
					return h(NUpload, {
						action: '#',
						accept: 'audio/mp3, video/mp4',
						'show-file-list': false,
						'default-upload': false,
						onChange: ({file,event}) => {
							handleFinish({file,event}, row)
						}
					}, { 
						default: () => {
							return h(NButton, 
							{ 
								size: 'small', 
								type: 'primary'
							}, 
							{ default: () => '上传' })
						}
					})
				} else if (!row.content) {
					return h(NButton, 
					{ 
						size: 'small', 
						type: 'info',
						onClick: () => {
							read(row)
						}
					}, 
					{ default: () => '批阅' })
				} else {
					return h(NButton, 
					{ 
						size: 'small', 
						type: 'warning',
						onClick: () => {
							result.params = row
							result.show = true
						}
					}, 
					{ default: () => '查看' })
				}
			}
		}
	]
function getInfo () {
	get(`/homeWork/getInfo`, { id: paramsStore.params.workId }, content => {
		homeWork.value = content.homeWork
		grade.value = content.grade
		students.value = content.students
		homeWorkCommits.value = content.homeWorkCommits
		compose()
	})
}
function compose () {
	students.value.forEach(student => {
		student.commitStatus = '未提交'
		student.readStatus = '未批阅'
		student.path = ''
		student.content = ''
		student.commitId = null
		homeWorkCommits.value.forEach(homeWorkCommit => {
			if (homeWorkCommit.studentId === student.id) {
				student.commitStatus = '已提交'
				student.path = homeWorkCommit.path
				student.commitId = homeWorkCommit.id
				student.total = homeWorkCommit.total
				if (homeWorkCommit.content) {
					student.readStatus = '已批阅'
					student.content = homeWorkCommit.content
					student.val = homeWorkCommit.val
				}
			}
		})
	})
}
function read (row) {
	dialog.info({
		title: '提示',
		positiveText: '确定',
		negativeText: '取消',
		content: '确定要批阅该学生作业吗',
		onPositiveClick: () => {
			post('/homeWorkCommit/read', { id: row.commitId }, content => {
				getInfo()
			})
		}
	})
}
if (process.client) {
	getInfo()
}
</script>

<style scoped lang="scss">
.wrapper {
	width: 100%;
	.content {
		width: 1140px;
		margin: 0 auto;
		background-color: #ffffff;
		header {
			height: 100px;
			background-image: linear-gradient(90deg,#d9effe 0%,#e1ebfd 100%);
			border-radius: 5px;
			padding: 18px 0;
			padding-left: 30px;
			.cellContainer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				h2 {
					font-weight: 900;
				}
				.grade_name {
					color: #ffffff;
					width: 250px;
					height: 32px;
					line-height: 32px;
					background-image: linear-gradient(90deg,#245fe6 0%,#87abfd 100%);
					padding-left: 10px;
					border-radius: 20px 0 0 20px;
				}
				.create_date {
					word-spacing: 1rem;
				}
				.commit {
					strong {
						margin-right: 20px;
					}
				}
			}
		}
		.tableContainer {
			margin-top: 20px;
		}
	}
}
</style>